<template>
	<div class="routineadminInfo" v-loading="state.loading">
		<el-card>
			<template #header>
				<div class="card-header clearfix">
					<span class="headerTitle">个人资料</span>
				</div>
			</template>
			<div>
				<div v-if="state.upShow">
					<el-form :model="state.detailData" ref="detailDataRef" :rules="rules" label-width="120px" status-icon>
						<el-form-item label="头像：" prop="avatar" >
							<div class="selectImg">
								<el-image style="width: 100%;height: 100%;" fit="cover" :src="state.detailData.avatar">
									<template #error>
										<div style="line-height: 150px;text-align: center;">
											暂无图片
										</div>
									</template>
								</el-image>
								<div class="imgBtn">
									<i class="fa fa-eye" v-if="state.detailData.avatar"  @click="selectImgBtn('eye')"></i>
									<i class="fa fa-trash-o selectDel" v-if="state.detailData.avatar"  @click="selectImgBtn('del')"></i>
									<i class="fa fa-file-image-o" v-if="!state.detailData.avatar" @click="selectImgBtn('select')"></i>
								</div>
							</div>
						</el-form-item>
						<el-form-item label="用户名：" :prop="state.detailData.uid?'':'uname'" >
							<div v-if="state.detailData.uid">
								{{state.detailData.uname}}
							</div>
							<div v-else>
								<el-input v-model="state.detailData.uname" clearable />
							</div>
						</el-form-item>
						<el-form-item label="用户昵称：" prop="nickName" >
							<el-input v-model="state.detailData.nickName" clearable />
						</el-form-item>
						<el-form-item label="性别：" prop="gender" >
							<el-radio-group v-model="state.detailData.gender">
								<el-radio label="0"  border>男</el-radio>
								<el-radio label="1"  border>女</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="手机号码：" prop="phone" >
							<el-input v-model="state.detailData.phone" clearable />
						</el-form-item>
						<el-form-item label="邮箱：" prop="email" >
							<el-input v-model="state.detailData.email" clearable />
						</el-form-item>
						<el-form-item label="QQ号：" prop="qq" >
							<el-input v-model="state.detailData.qq" clearable />
						</el-form-item>
						<el-form-item label="微信：" prop="wx" >
							<el-input v-model="state.detailData.wx" clearable />
						</el-form-item>
					</el-form>
				</div>
				<div v-if="!state.upShow">
					<div>
						<el-form label-width="120px">
							<el-form-item label="头像：">
								<div class="selectImg">
									<el-image style="width: 100%;height: 100%;" preview-teleported  :preview-src-list="[state.detailData.avatar]" fit="cover" :src="state.detailData.avatar" >
										<template #error>
											<div style="line-height: 150px;text-align: center;">
												暂无图片
											</div>
										</template>
									</el-image>
								</div>
							</el-form-item>
							<el-form-item label="用户名：">
								<div>
									{{state.detailData.uname}}
								</div>
							</el-form-item>
							<el-form-item label="用户昵称：">
								<div>
									{{state.detailData.nickName}}
								</div>
							</el-form-item>
							<el-form-item label="性别：">
								<div>
									{{state.detailData.gender=="0"?"男":state.detailData.gender=="1"?"女":"未知"}}
								</div>
							</el-form-item>
							<el-form-item label="手机号码：">
								<div>
									{{state.detailData.phone}}
								</div>
							</el-form-item>
							<el-form-item label="邮箱：">
								<div>
									{{state.detailData.email}}
								</div>
							</el-form-item>
							<el-form-item label="QQ号：">
								<div>
									{{state.detailData.qq}}
								</div>
							</el-form-item>
							<el-form-item label="微信：">
								<div>
									{{state.detailData.wx}}
								</div>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
			<div class="caozuoBtnCss">
				<div v-if="!state.upShow">
					<el-button type="primary" plain @click="state.upShow=true;">修改资料</el-button>
					<el-button type="danger" plain @click="state.mimaShow=true;">修改密码</el-button>
				</div>
				<div v-if="state.upShow">
					<el-button type="info"  @click="quxiaoBtn('detail')">取消修改</el-button>
					<el-button type="primary" @click="queding(detailDataRef)" :loading="state.btnloading" :disabled="state.btnloading">确定修改</el-button>
				</div>
			</div>
		</el-card>
		<!-- 密码修改 -->
		<el-dialog
			v-model="state.mimaShow"
			title="修改密码"
			center
		>
			<el-form :model="state.mimaData" ref="mimaDataRef" :rules="rules" label-width="120px" status-icon>
					<el-form-item label="原密码" prop="oldPassword" >
							<el-input type="password" v-model="state.mimaData.oldPassword" clearable show-password	  />
					</el-form-item>
					<el-form-item label="新密码" prop="newPassword" >
							<el-input type="password" v-model="state.mimaData.newPassword" clearable show-password	  />
					</el-form-item>
					<el-form-item label="重复新密码" prop="password" >
							<el-input type="password" v-model="state.mimaData.password" clearable show-password	  />
					</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="quxiaoBtn('mima')">取消</el-button>
					<el-button type="primary" @click="queding(mimaDataRef)" :loading="state.btnloading" :disabled="state.btnloading">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { toRefs,ref, reactive,onMounted, defineComponent,defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router'
import { isModification } from '/@/utils/kingmin';//去重
import { ElNotification, ElMessage ,ElMessageBox ,FormRules,ElTree,FormInstance} from 'element-plus'
import { userApi } from '/@/api/user';

// 引入组件
const Accessory= defineAsyncComponent(() => import('/@/components/accessory/index.vue'));

const detailDataRef=ref();
const mimaDataRef=ref();
const router = useRouter();

const state = reactive({
	roleBtn:router.currentRoute.value.meta.roleBtn,
	dataList:[],
	loading:true,
	pages: {
        isAll: false,
        pageCount: 0,
        pageSize: 0,
        recordCount: 0,
        pno: 1
      },
	detailData:{
		uid:"",
		uname:"",
		nickName:"",
		phone:"",
		avatar:"",
		gender:"0",
		email:"",
		qq:"",
		wx:"",
		role:"ordinary",
		status:"0",
	},
	originalData:{},
	selectImgShow:false,
	btnloading:false,
	upShow:false,
	mimaShow:false,
	mimaData:{
		oldPassword:"",
		newPassword:"",
		password:"",
	}
});

const rules = reactive<FormRules>({
	nickName: [
		{ required: true, message: '请输入用户昵称', trigger: 'blur' },
		{ min: 3, max:12, message: '最少4个字符,最多12个字符', trigger: 'blur' },
	],
	uname: [
		{ required: true, message: '必须填写用户名,可用于登录', trigger: ['blur', 'change'] },
	],
	phone: [
		{ required: true, message: '请输入手机号码,可用于登录', trigger: 'blur' },
		{ min: 11, max:11, message: '格式不正确', trigger: 'blur' },
	],
	email: [
		{ required: true, message: '请输入邮箱,可用于登录', trigger: 'blur' },
		{ type: 'email', message: '输入的邮箱格式不正确', trigger: ['blur', 'change'], },
	],
	role: [
		{ required: true, message: '请选择用户权限', trigger: ['blur', 'change'] },
	],
	status: [
		{ required: true, message: '请选择角色权限', trigger: 'blur' },
	],
	oldPassword: [
		{ required: true, message: '请填写密码', trigger: 'blur' },
		{ min: 6, max:20, message: '最少6个字符,最多20个字符', trigger: 'blur' },
	],
	newPassword: [
		{ required: true, message: '请填写密码', trigger: 'blur' },
		{ min: 6, max:20, message: '最少6个字符,最多20个字符', trigger: 'blur' },
	],
	password: [
		{ required: true, message: '请填写密码', trigger: 'blur' },
		{ min: 6, max:20, message: '最少6个字符,最多20个字符', trigger: 'blur' },
	]
	
});

const queding = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			state.btnloading=true;
			if(state.upShow){
				let dt=isModification(state.detailData,state.originalData);
				if(Object.values(dt).length>0){
					dt.uid=state.detailData.uid;
				}else{
					ElMessage({message:'没有要修改的数据',type:"warning"});
					state.dtShow=false;
					state.btnloading=false;
					return false;
				}
				upDataFun(dt);
			}
			if(state.mimaShow){
				let dt=state.mimaData;
				if(dt.password===dt.oldPassword){
					ElMessage({message:'密码一样,不用修改',type:"warning"});
					state.btnloading=false;
					return false;
				}
				if(dt.password===dt.newPassword){
					dt.uid=state.detailData.uid;
					upDataFun(dt);
				}else{
					ElMessage({message:'重复密码和新密码不一样',type:"warning"});
					state.btnloading=false;
				}
			}
		} else {
			// console.log('error submit!', fields)
			ElMessage({message:'请检查数据,有必填项未填写',type:"warning"});
		}
	})
};
const upDataFun=(dt:object)=>{
	if(!dt){
		ElMessage.error('修改的数据为空');
		return false;
	}
	userApi('upPersonalData',dt).then(res=>{
		// console.log(res)
		ElMessage({message:res.msg?res.msg:"操作成功",type:"success"});
		// state.dtShow=false;
		if(state.upShow){
			state.upShow=false;
			state.btnloading=false;
		}
		if(state.mimaShow){
			quxiaoBtn('mima');
		}
		// getMemberList(state.pages.pno);
	})
	.catch(res=>{
		if(res.code!=450000){
			ElMessageBox.confirm(res.msg, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
			.then(() => {})
			.catch(() => {});
			state.btnloading=false;
		}
	})
}
const quxiaoBtn=(e:string)=>{
	if(e=='detail'){
		state.detailData=JSON.parse(JSON.stringify(state.originalData));
		state.upShow=false;
	}
	if(e=='mima'){
		state.mimaShow=false;
		state.mimaData={
			oldPassword:"",
			newPassword:"",
			password:"",
		}
	}
	state.btnloading=false;
}

const imgSelectBtn = (item) => {
	for(let p of item){
		state.detailData.avatar=p.url;
	}
	quxiaoSelectBtn('img');
};
const quxiaoSelectBtn = (item) => {
	if(item=='img'){
		state.selectImgShow=false;
	}
	
};
const selectImgBtn=(e)=>{
	if(e=="eye"){
		imageUrl.value = state.detailData.avatar
  		imageShow.value = true
	}
	if(e=="del"){
		state.detailData.avatar="";
	}
	if(e=="select"){
		state.selectImgShow=true;
	}
};

// 获取个人资料
const getPersonalData = () => {
	
	userApi('personalData',{}).then((res)=>{
		state.originalData=JSON.parse(JSON.stringify(res));
		state.detailData=res;
		state.loading=false;
	}).catch((res) => {
		// console.log(res)
		state.loading=false;
	});
};
// 权限判断
const isAuthBtn = (e) => {
	let auth=false;
	if(e){
		for(let p of state.roleBtn){
			if(p==e){
				auth=true;
			}
		}
	}
	return auth;
};
// 跳转
const tourl = (e) => {
	router.push(e);
};

onMounted(()=>{
      // 获取当前路由实例参数
    //   console.dir(router.currentRoute.value.query.id);
	  if(!isAuthBtn('index')){
		  router.push('/401');
	  }else{
	  	//操作函数
		  getPersonalData()
	  }
})
</script>

<style scoped lang="scss">
	.routineadminInfo{
		padding:5px;
		.caozuoBtnCss{
			margin-top:20px;
			padding-left:50px;
		}
	}
</style>
